<template>
  <Modal
    v-model:active="chamferFaceModalVueActive"
    transfer
    title="倒圆角面"
    :width="480"
    :height="640"
    confirm-text="应用"
    @confirm="executeFaceFillet"
    hide-mask
    draggable
  >
    <NativeScroll use-y-bar height="100%" scroll-style="padding: 24px;">
      <Row :gap="[8]">
        <ConfigProvider :props="providedProps">
          <Form :model="formModel">
            <Column :span="24">
              <div class="title">
                <div class="title_color"></div>
                <div class="title_content">选择器</div>
              </div>
            </Column>
            <Column :span="10" :offset="6">
              <FormItem label="类型:" prop="select">
                <Select :options="typeOptions" v-model:value="value"></Select>
              </FormItem>
            </Column>
            <Divider></Divider>
            <Column :span="24">
              <div class="title">
                <div class="title_color"></div>
                <div class="title_content">参数</div>
              </div>
            </Column>
            <Column :span="12" :offset="6">
              <FormItem label="最小半径:" prop="input">
                <Input v-model:value="formModel.minRadius"></Input>
              </FormItem>
            </Column>
            <Column :span="12" :offset="6">
              <FormItem label="最大半径:" prop="input">
                <Input v-model:value="formModel.maxRadius"></Input>
              </FormItem>
            </Column>
            <Column :span="12" :offset="6">
              <FormItem label="最小角度:" prop="input">
                <Input v-model:value="formModel.minAngle"></Input>
              </FormItem>
            </Column>
            <Column :span="18" :offset="6">
              <FormItem label="曲率图形搜索:" prop="select">
                <Checkbox v-model:checked="curvatureGraphicalSearch">
                </Checkbox>
              </FormItem>
            </Column>
            <Column :span="6" :offset="11">
              <FormItem label="类型" action>
                <Button type="primary"> 搜索邻面 </Button>
              </FormItem>
            </Column>
            <Column :span="6" :offset="0">
              <FormItem label="类型" action>
                <Button type="primary"> 自动搜索 </Button>
              </FormItem>
            </Column>
          </Form>
        </ConfigProvider>
      </Row>
    </NativeScroll>
  </Modal>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  Modal,
  Select,
  Divider,
  Form,
  FormItem,
  ConfigProvider,
  Input,
  Checkbox,
  NativeScroll,
  Row,
  Column,
  Toast,
  Button,
  Message,
} from "cax-ui";
import { storeToRefs } from "pinia";
import { useCoreStore, _global } from "@/UI/store";
const coreStore = useCoreStore();

let { chamferFaceModalVueActive } = storeToRefs(coreStore);
const value = ref<number>(1);

const providedProps = {
  default: { clearable: true },
  formItem: { required: false },
};

const curvatureGraphicalSearch = ref<boolean>(false);
function getRealCurvatureGraphicalSearch() {
  return curvatureGraphicalSearch.value ? 1 : 0;
}

const typeOptions = [
  {
    label: "面",
    value: 1,
  },
];

let formModel = {
  minRadius: 0.0, //最小半径
  maxRadius: 17.3262, // 最大半径
  minAngle: 90, // 最小角度
  curvatureGraphicalSearch: 0, // 设置是否选中曲率图形搜索
};

function executeFaceFillet() {
  Toast.loading({ content: "倒圆角面中", duration: 0 });
  _global.Engine.defeature
    .face_fillet()
    .then((result: any) => {
      console.log("result", result);
      coreStore.setBomInfo(result);
      console.log("外部获取装配信息", result);
      if (result) {
        Message.success("倒圆角面成功");
      }
    })
    .catch((err) => {
      Message.error(err);
    })
    .finally(() => {
      Toast.close();
    });
}
</script>

<style scoped lang="less">
:deep(.vxp-form) {
  display: flex;
  align-items: center;
}

.title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }

  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
</style>
